<template>
  <div class='form-element'>
    <h2> {{ title }} </h2>
    <input type='text' v-model='username' placeholder='Username' />

    <input type='password' v-model='password' placeholder='Password' />

    <button @click='login'>
      Submit
    </button>
    <p>
      Values: {{ username + ' ' + password }}
    </p>
    <ul>
      <li v-for="(movie, idx) in movies" @click="currentIdx = idx" :class="{active: currentIdx === idx}">{{movie}}</li>
    </ul>
  </div>
</template>
<script>
import { inject, reactive, ref } from 'vue'

export default {
  props: {
    title: {
      type: String,
      default: 'vue2'
    }
  },
  setup(props,{emit}) {
    const movies = inject('movies');
    // let currentIdx = reactive({
    //   idx: 0
    // });
    let currentIdx = ref(null);
    return {
      movies,
      currentIdx
    }
  },
  data () {
    return {
      username: 'abckefg',
      password: ''
    }
  },
  mounted () {
    console.log(this.movies)
  },
  computed: {
    lowerCaseUsername () {
      return this.username.toLowerCase()
    }
  },
  methods: {
    login () {
      this.$emit('login', {
        username: this.username,
        password: this.password
      })
    }
  }
}
</script>
<style scoped>
.active {
  color: red;
  font-size: 25px;
}
</style>
